<template>
  <el-dialog :visible.sync="value" :before-close="cancel">
    <template slot="title">
      设置返佣
    </template>
    <el-card>
      <div slot="header">
        返佣比例设置
        <el-button style="float: right;padding: 3px 0" type="text" @click="addStratified">添加
        </el-button>
      </div>
      <el-form :model="$data" :rules="refRule" ref="refForm" label-position="left" inline class="demo-table-expand">
        <el-table
          :data="tableData"
          ref="refTable"
          border>
          <el-table-column label="情况" align="center" min-width="120">
            <template slot-scope="{row}">如果总输值>=</template>
          </el-table-column>
          <el-table-column label="公司总输赢" align="center">
            <template slot-scope="{row,$index}">
              <el-form-item>
                <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'refForm'})" class="edit-input" size="small" v-model="row.profit"></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column  label="返佣比例(%)" min-width="120" align="center">
            <template slot-scope="{row,$index}">
                <el-form-item  :prop="`tableData.${$index}.commission`" :rules="refRule.commission">
                  <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'refForm'})" class="edit-input" size="small" v-model.number="row.commission"></el-input>
                </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="userCount" label="有效会员数" align="center">
            <template slot-scope="{row,$index}">
                <el-form-item>
                  <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'refForm'})" class="edit-input" size="small" v-model="row.userCount"></el-input>
                </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="情况" align="center" min-width="120">
            <template slot-scope="{row}">不满足则下一步</template>
          </el-table-column>
          <el-table-column label="操作" width="60" align="center">
            <template slot-scope="{row,$index}">
              <el-button type="text" @click="delStratified($index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>

    </el-card>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="doSave({action: 'saveForm', form: 'refForm'})">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>

  import {form, factory} from '@/build'
  import {getCommissionDetail, editCommissionConfigs} from '@/services/api/commission';
  import ElTip from "@/components/Tip/index";

  export default {
    name: "commission-return-configs-dialog",
    components: {ElTip},
    props: ['value', 'id'],
    mixins: [form, factory],
    data() {
      return {
        formLabelWidth: '180px',
        keywords: '',
        tableData: [],
        refRule: {
          commission:factory.getRule('percent'),
        },
      }
    },

    mounted() {
      if (!_.isUndefined(this.id)) {
        this.bindGet(getCommissionDetail, 'tableData', {
          sendingData: {id: this.id},
          format: data => {
            return _.map(data, item => {
              const {configList} = item
              return {...item, configList: _.isArray(configList) ? configList : []}
            });
          }
        })
        this.getAll()
      }
      this.bindSave(editCommissionConfigs, 'saveForm', 'tableData', {
        beforeSend: data => {
          const {id} = this
          return {commList: data, id}
        },
        afterSuccess: () => {
          this.cancel()
          this.$parent.getAll()
        }
      });
    },
    methods: {
      cancel() {
        this.$emit('input', false);
      },

      // onchange(row) {
      //   if (row.type === 1) {
      //     this.$refs.refTable.toggleRowExpansion(row, true);
      //   } else {
      //     this.$refs.refTable.toggleRowExpansion(row, false);
      //   }
      //
      //   return row.type
      // },
      addStratified() {
        this.tableData.push({commissionLimit: 0, commission: 0, userCount: 0})
      },
      delStratified(index) {
        this.tableData.splice(index, 1);
      }
    },

  }
</script>

<style lang="scss" scoped>

</style>
